<template>
	<view class="w-100">
		<view class="bg-f1 h-100vh">
			<view class="dp-f jc-c ai-c mb-20 fz-28">
				<view class="dp-f jc-c ai-c m-0-10">
					<image :style="'width:'+seatSize+'px;height:'+seatSize+'px'" src="/static/icons/can_select.png"
						mode="aspectFit"></image><span class="ml-10">可选</span>
				</view>

				<view class="dp-f jc-c ai-c m-0-10">
					<image :style="'width:'+seatSize+'px;height:'+seatSize+'px'" src="/static/icons/selected.png"
						mode="aspectFit"></image><span class="ml-10">选中</span>
				</view>
				<view class="dp-f jc-c ai-c m-0-10">
					<image :style="'width:'+seatSize+'px;height:'+seatSize+'px'" src="/static/icons/isSale.png"
						mode="aspectFit"></image><span class="ml-10">已售</span>
				</view>
				<view class="dp-f jc-c ai-c m-0-10">
					<image :style="'width:'+seatSize+'px;height:'+seatSize+'px'" src="/static/icons/broken.png"
						mode="aspectFit"></image><span class="ml-10">不可选</span>
				</view>
			</view>
			<movable-area :style="'height:'+(seatRow*40+350)+'rpx;width: 100vw;'" class="pt-f left-0">
				<movable-view :style="'width: 100vw;height:'+(seatRow*40+350)+'rpx;'" :inertia="true" :scale="true"
					:scale-min="0.95" :scale-max="3" direction="all" @change="onMove" @scale="onScale">
					<view class=" dp-f jc-c ai-c fz-22 color-333"
						style="display: flex;flex-direction: column;align-items: center;">
						<image src="../../static/image/screen.png" mode="widthFix" style="width: 60%;"></image>
						<view style="margin-top: -20rpx;">{{filmData.ScreenName}}</view>
					</view>
					<!-- 			<view style="width: 100rpx;height: 30rpx;"
						class="m-0-a mt-48 dp-f jc-c ai-c fz-20 color-999 b-1 br-5">银幕中央</view> -->
					<view class="pt-f pa-v-2 b-d-1"
						:style="'height:'+seatRow*(20+seatSize*pxNum)+'rpx;top:165rpx;width:0'"></view>
					<view v-for="(item,index) in seatArray" :class="index===0?'fisrt-row':''" :key="index"
						class="dp-f jc-c mt-20 new row-seats" :style="'height:'+seatSize+'px;'">
						<view @click="handleChooseSeat(seat,index,col)" v-for="(seat,col) in item" :key="col"
							class="dp-ib " :style="'min-width:'+seatSize+'px;'"
							v-if="seat.Lovers==item[col+1].Lovers || seat.Lovers=='' || seat.type==-1">
							<image v-if="seat.type==='Available'&& !seat.Lovers" class="w-100 h-100"
								src="../../static/icons/can_select.png" mode="aspectFit"
								:style="'width:'+seatSize+'px;height:'+seatSize+'px;'"></image>
							<image v-else-if="seat.type==='Selected'&& !seat.Lovers" class="w-100 h-100"
								src="../../static/icons/selected.png" mode="aspectFit"
								:style="'width:'+seatSize+'px;height:'+seatSize+'px;'"></image>
							<image v-else-if="seat.type==='Sold'&& !seat.Lovers" class="w-100 h-100"
								src="../../static/icons/isSale.png" mode="aspectFit"
								:style="'width:'+seatSize+'px;height:'+seatSize+'px;'"></image>
							<image v-else-if="seat.type==='Locked'&& !seat.Lovers" class="w-100 h-100"
								src="../../static/icons/isSale.png" mode="aspectFit"
								:style="'width:'+seatSize+'px;height:'+seatSize+'px;'"></image>
							<!-- 取消疫情锁座 -->
							<image v-else-if="seat.type==='Unavailable' &&seat.ColumnNum!='-1'&& !seat.Lovers"
								class="w-100 h-100" src="../../static/icons/broken.png" mode="aspectFit"
								:style="'width:'+seatSize+'px;height:'+seatSize+'px;'"></image>
							<image v-else-if="seat.type==='Booked' &&seat.ColumnNum!='-1'&& !seat.Lovers"
								class="w-100 h-100" src="../../static/icons/broken.png" mode="aspectFit"
								:style="'width:'+seatSize+'px;height:'+seatSize+'px;'"></image>
							<!-- 情侣座 -->
							<image v-if="seat.type==='Available'&& seat.Lovers && seat.isLover"
								class="w-100 h-100 lover" src="../../static/icons/lover.png" mode="aspectFit"
								:style="'width:'+seatSize*1.8+'px;height:'+seatSize+'px;'"></image>
							<image v-else-if="seat.type==='Selected'&& seat.Lovers && seat.isLover"
								class="w-100 h-100 lover" src="../../static/icons/selected_lover.png" mode="aspectFit"
								:style="'width:'+seatSize*1.8+'px;height:'+seatSize+'px;'">
							</image>
							<image v-else-if="seat.type==='Sold'&& seat.Lovers && seat.isLover"
								class="w-100 h-100 lover" src="../../static/icons/sale_lover.png" mode="aspectFit"
								:style="'width:'+seatSize*1.8+'px;height:'+seatSize+'px;'">
							</image>
							<image v-else-if="seat.type==='Locked'&& seat.Lovers && seat.isLover"
								class="w-100 h-100 lover" src="../../static/icons/sale_lover.png" mode="aspectFit"
								:style="'width:'+seatSize*1.8+'px;height:'+seatSize+'px;'">
							</image>
							<image
								v-else-if="seat.type==='Unavailable'&& seat.isLover &&seat.ColumnNum!='-1'&& seat.Lovers"
								class="w-100 h-100 lover" src="../../static/icons/broken_lover.png" mode="aspectFit"
								:style="'width:'+seatSize*1.8+'px;height:'+seatSize+'px;'">
							</image>
							<image v-else-if="seat.type==='Booked'&& seat.isLover &&seat.ColumnNum!='-1'&& seat.Lovers"
								class="w-100 h-100 lover" src="../../static/icons/broken_lover.png" mode="aspectFit"
								:style="'width:'+seatSize*1.8+'px;height:'+seatSize+'px;'">
							</image>


						</view>
					</view>
					<view class="pt-f bg-line br-15 over-h"
						:style="'left: '+(10-moveX/scale)+'px;top:235rpx;width:30rpx;'">
						<view class="w-100 dp-f ai-c jc-c  color-fff"
							:style="'height:'+seatSize+'px;line-height:'+seatSize+';font-size:18rpx;margin-top:'+(mindex+1)*0.85+'rpx;'"
							v-for="(m,mindex) in mArr" :key="mindex">
							{{m}}
						</view>
						<!-- <view :style="'height: 10rpx;'"></view> -->
					</view>

				</movable-view>
			</movable-area>
			<view class="pt-f bottom-bar left-0 dp-f fd-cr z1000">
				<view class="bg-white p-all-32">
					<view class="info-text">
						<u-icon name="volume" color="orange" />
						<text style="margin-left: 15rpx;">{{choiceSeatNotice}}</text>
					</view>
					<view class="film-name">
						<text>{{filmData.filmName}}</text>
						<view class="seat-film-info">
							<text>{{getWeek(filmData.StartTime)}}</text>
							<text>{{getDate(filmData.StartTime)}}</text>
							<text>{{getTime(filmData.StartTime)}}~{{getTime(filmData.EndTime)}}</text>
							<text> {{filmData.ShowType}}</text>
						</view>

					</view>
					<scroll-view :scroll-x="true" class="dp-f ai-c fw-w fz-28 color-333 mb-20 select-seats-list"
						v-if="selectList.length>0">
						<view class="select-seats-box" v-for="(item,optindex) in selectList" :key="optindex"
							@click="removeSeat(item,true)">
							<view class="p-all-10 b-1 br-5 dp-f ai-c jc-c fz-28 select-seats ">

								<text>{{item.RowNum+'排'+item.ColumnNum+'座'}} </text>
								<u-icon name="close" size="20rpx"
									custom-style="position: absolute;right: 2rpx;top:3rpx;" />

								<text>￥{{filmData.memberPrice?filmData.memberPrice:filmData.LowestPrice}}元起</text>
							</view>
						</view>

					</scroll-view>
					<view @click="buySeat">
						<u-button round customStyle='width:92%;' color="linear-gradient(to right, #99d6ff, #008ae6)"
							size="large">{{selectList.length>0?(`立即锁座`):'请选座位'}}</u-button>
					</view>
				</view>
			</view>
		</view>
		<seat-toast :showSeatToast="showSeatToast"></seat-toast>
		<view class="date-toast" v-show="showTost">
			<text>您选择的是 </text>
			<text style="color: #d5bd46;font-weight:bold;">{{filmData.week}} {{filmData.StartTime}}</text>
			<text>的场次，</text>
			<text style="color: #d5bd46;font-weight:bold;">请提前出发哦!</text>
		</view>
	</view>
	</view>
	</view>
</template>
<script>
	import {
		querySeats,
		querySessionSeats,
		lockedSeat,
		querySession
	} from '../../common/http/api.js'
	import SeatToast from './seatToast.vue'
	export default {
		components: {
			SeatToast
		},
		data() {
			return {
				boxWidth: 400, //屏幕宽度px
				seatArray: [], //影院座位的二维数组,-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色),一维行，二维列
				seatRow: 0, //影院座位行数
				seatCol: 0, //影院座位列数
				seatSize: 0, //座位尺寸
				SelectNum: 0, //选择座位数
				moveX: 0, //水平移动偏移量
				scale: 1, //放大倍数
				minRow: 0, //从第几行开始排座位
				minCol: 0, //从第几列开始排座位
				seatList: [], //接口获取的原始位置
				mArr: [], //排数提示
				lockedParams: {},
				selectList: [],
				filmData: {},
				unSelectedSeat: false,
				toastList: [],
				choiceSeatNotice: '',
				totalPrice: 0,
				serviceFee: 0,
				isShowToast: false,
				showTost: false,
				showSeatToast: false,
				toastTimer: null,
				errorSeat: {},
				seatsNum: 0
			};
		},
		computed: {
			loverWidth() {
				const v = 90 / this.seatsNum

				let width = 0
				if (v < 1) {
					width = 40 * (1 - v)
				} else {
					width = 40 * v
				}

				return width
			},
			aPrice() {
				return this.SelectNum * 36
			},
			rpxNum() {
				return this.boxWidth / 750
			},
			pxNum() {
				return 750 / this.boxWidth
			},
			getDate() {
				return date => {
					let mouth = ''
					let day = ''
					if (date) {
						mouth = date.slice(5, 7)
						day = date.slice(8, 10)
					}

					return `${mouth}-${day}`
				}
			},
			//tab日期
			getWeek() {
				return date => {
					//今天

					const nowDate = new Date();
					const month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() +
						1;
					const today = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
					const currentDate = month + '-' + today
					//传入时间
					const mydate = new Date(date);
					const day = mydate.getDay();
					const weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];

					return weekday[day]
				}
			},
			getTime() {
				return date => {
					return date ? date.slice(11, 16) : ''
				}
			},
		},
		onLoad() {
			//获取宽度
			const _this = this
			uni.getSystemInfo({
				success: function(e) {
					_this.boxWidth = e.screenWidth
				}
			})

			this.filmData = this.$store.state.sessionInfo

			this.getSeat(this.filmData.PlanCode, this.filmData.ScreenCode)
			this.choiceSeatNotice = this.$store.state.cinemaConfig.choiceSeatNotice
			this.upDateStatus()
			uni.setNavigationBarTitle({
				title: this.$store.state.cinemaName
			})


			//消息 提示
			if (!this.isShowToast && this.filmData.week != '今天') {
				this.showTost = true;
				this.isShowToast = true;
				setTimeout(() => {
					this.showTost = false;
				}, 3000)
			}

		},
		methods: {
			initData: function(seatData) {
				let arr = seatData
				//假数据说明：SeatCode座位编号，RowNum-行号，ColumnNum-纵号，YCoord-Y坐标，XCoord-X坐标，Status-状态
				let row = 0
				let col = 0
				let minCol = parseInt(arr[0].XCoord)
				let minRow = parseInt(arr[0].YCoord)
				for (let i of arr) {
					minRow = parseInt(i.YCoord) < minRow ? parseInt(i.YCoord) : minRow
					minCol = parseInt(i.XCoord) < minCol ? parseInt(i.XCoord) : minCol
					row = parseInt(i.YCoord) > row ? parseInt(i.YCoord) : row
					col = parseInt(i.XCoord) > col ? parseInt(i.XCoord) : col
				}
				const list = arr.filter((item, index) => {
					if (index < arr.length - 1 && item.Lovers !== '' && item.Lovers === arr[index + 1]
						.Lovers) {
						return item
					} else if (item.Lovers === '') {
						return item
					}
				})
				this.seatList = arr
				this.seatRow = row - minRow + 1
				this.seatCol = col - minCol + 3
				this.minRow = minRow
				this.minCol = minCol - 1
				this.initSeatArray()
			},
			//初始座位数组
			initSeatArray: function() {
				let seatArray = Array(this.seatRow).fill(0).map(() => Array(this.seatCol).fill({
					type: -1,
					SeatCode: '',
					RowNum: '',
					ColumnNum: ''
				}));
				this.seatArray = seatArray
				this.seatSize = this.boxWidth > 0 ?
					parseInt(parseInt(this.boxWidth, 10) / (this.seatCol + 1), 10) :
					parseInt(parseInt(414, 10) / (this.seatCol + 1), 10)
				this.initNonSeatPlace();
			},
			//初始化是座位的地方
			initNonSeatPlace: function() {
				let seat = this.seatList.slice()
				let arr = this.seatArray.slice()

				for (let num in seat) {

					let status = '' //-1为非座位，0为未购座位，1为已选座位(绿色),2为已购座位(红色)
					if (seat[num].Status === 'Unavailable') {
						//节日改为可售
						status = 'Unavailable'
						// status = 'Available'
					} else if (seat[num].Status === 'Available') {
						status = 'Available'
					} else if (seat[num].Status === 'Selected') {
						status = 'Selected'
					} else if (seat[num].Status === 'Sold') {
						status = 'Sold'
					} else if (seat[num].Status === 'Locked') {
						status = 'Locked'
					} else if (seat[num].Status === 'Booked') {
						status = 'Booked'
					}
					arr[parseInt(seat[num].YCoord) - this.minRow][parseInt(seat[num].XCoord) - this.minCol] = {
						type: status,
						SeatCode: seat[num].Code,
						RowNum: seat[num].RowNum,
						ColumnNum: seat[num].ColumnNum,
						Lovers: seat[num].Lovers,
						isLover: seat[num].isLover
					}
				}
				this.seatArray = arr.slice()
				let mArr = []
				for (let i in arr) {
					let m = ''
					for (let n of arr[i]) {
						if (n.SeatCode) {
							m = n.RowNum
						}
					}
					if (m) {
						if (m != '-1') {
							mArr.push(m)
						} else {
							mArr.push('')
						}

					} else {
						mArr.push('')
					}
				}
				this.mArr = mArr
			},
			//放大缩小事件
			onScale: function(e) {
				this.showTis = false
				let w = this.boxWidth * 0.5
				let s = 1 - e.detail.scale
				this.moveX = w * s
				this.scale = e.detail.scale
				if (s > 0 || s === 0) {
					this.showTis = true
				}
			},
			//移动事件
			onMove: function(e) {
				this.showTis = false
				this.moveX = e.detail.x
			},
			//选定且购买座位
			buySeat: function() {

				if (!this.$store.state.userPhone) {
					uni.navigateTo({
						url: "../../pages/getPhone/getPhone"
					})

				} else {
					const errIndex = this.selectList.findIndex(item => item.SeatCode == this.errorSeat.SeatCode)


					if (this.selectList.length === 0) {
						uni.showToast({
							title: '请选择座位后付款',
							icon: "none"
						})
						return
					} else if (errIndex != -1) {
						uni.showToast({
							title: '座位中间请不要留空',
							icon: "none"
						})
						return
					} else {
						let seatList = []
						let seatCodeList = []
						this.lockedParams.Seat.map(item => {
							seatList.push(item.SeatPosition)
							seatCodeList.push({
								SeatCode: item.SeatCode
							})

						})
						this.$store.commit('setSeatsCode', seatCodeList)
						this.$store.commit('setSessionSeatList', seatList)
						if (!this.checkPrice()) {
							uni.showToast({
								title: "数据异常，请重试",
								icon: "none"
							})
							return
						}
						lockedSeat(this.lockedParams).then(res => {
							const {
								code,
								data,
								msg
							} = res
							if (code === "SUCCESS") {
								uni.navigateTo({
									url: `../orderInfo/orderInfo?orderCode=${data.orderCode}&channelOrderCode=${data.channelOrderCode}`
								})
							} else {
								uni.showToast({
									title: msg,
									icon: "none"
								})
							}

						})
					}
				}


			},
			async checkPrice() {
				let result = false
				const {
					data,
					code,
					msg
				} = await querySession()
				if (code === "SUCCESS") {
					const list = []
					for (let key in data) {
						list.push(...data[key])
					}
					const current = list.find(item => item.PlanCode == this.filmData.PlanCode)
					const index = this.lockedParams.Seat.findIndex(item => item.PayPrice != current.WxPayPrice)
					if (index == -1) result = true
				}
				return result
			},
			//处理座位选择逻辑
			handleChooseSeat: function(seat, index, col) {


				let seatValue = seat.type;
				let newArray = this.seatArray;
				let otherLover = {}
				let newCol = col
				const _seat = this.seatList.find(item => {
					return item.RowNum == index + 1 && item.ColumnNum == col
				})

				if (seat.isLover) {
					if (newArray[index][col - 1].Lovers === seat.Lovers) {
						otherLover = newArray[index][col - 1]
						newCol = col - 1
					} else if (newArray[index][col + 1].Lovers === seat.Lovers) {
						otherLover = newArray[index][col + 1]
					}
				}

				//如果是已购座位，直接返回
				//取消疫情锁座seatValue === 'Unavailable' ||
				if (seatValue === 'Sold' || seatValue === 'Unavailable' || seatValue === 'Booked') return
				//如果是已选座位点击后变未选
				if (seatValue === 'Selected') {
					if (seat.Lovers) {
						newArray[index][newCol].type = 'Available'
						newArray[index][col].type = 'Available'
						this.removeSeat(seat)
						this.removeSeat(otherLover)

					} else {
						newArray[index][col].type = 'Available'
						this.toastList = []
						this.removeSeat(seat)
						seat.type = 'Available'

					}
				} else if (seatValue === 'Available') {

					if (this.selectList.length >= 6) {
						uni.showToast({
							title: "最多选择6个座位",
							icon: "none"
						})
						return
					}
					if (seat.Lovers) {
						newArray[index][newCol].type = 'Selected'
						newArray[index][col].type = 'Selected'
						this.addSelected(seat)
						this.addSelected(otherLover)
					} else {
						newArray[index][col].type = 'Selected'

						seat.type = 'Selected'
						this.addSelected(seat)
						this.seatFn(newArray[index], col)
					}
				}
				this.seatArray = newArray.slice();

			},

			seatFn(rowList, index) {
				const list = rowList.slice(index - 2, index + 3)

				const statusList = list.map((item) => {
					if (item.type == "-1") return -1
					else if (item.type == "Available") return 0
					else if (item.type != "Available" && item.ColumnNum != '-1') return 1
				})

				if (statusList[0] == 1 && statusList[1] == 0) {
					clearTimeout(this.toastTimer)
					this.showSeatToast = true
					this.errorSeat = rowList[index]
					this.toastTimer = setTimeout(() => {
						this.showSeatToast = false
					}, 1000)

				} else if (statusList[4] == 1 && statusList[3] == 0) {
					clearTimeout(this.toastTimer)
					this.showSeatToast = true
					this.errorSeat = rowList[index]
					this.toastTimer = setTimeout(() => {
						this.showSeatToast = false
					}, 1000)
				} else if (statusList[1] == 1 && statusList[3] == 1) {
					this.errorSeat = {};
				}

			},
			//处理已选座位数组
			addSelected(seat) {

				if (this.selectList.length === 0) {
					this.selectList.push(seat)
				} else {
					this.selectList.push(seat)
					this.selectList.sort((a, b) => {
						return a.RowNum === b.RowNum ? parseInt(a.ColumnNum) - parseInt(b.ColumnNum) : a
					})
				}

				let seatList = []
				this.selectList.map(item => {
					let seat = {
						PayPrice: this.filmData.payPrice,
						Price: this.filmData.price,
						SeatCode: item.SeatCode,
						SeatPosition: `${item.RowNum}排${item.ColumnNum}号`,
						serviceFee: this.filmData.channelFee
					}
					seatList.push(seat)
				})

				this.lockedParams = {
					Count: this.selectList.length,
					SessionCode: this.filmData.PlanCode,
					openId: uni.getStorageSync("openId"),
					Seat: seatList
				}

			},

			removeSeat(seat, isBottom = false) {

				let newSelectList = []
				let newParamsList = []
				if (seat.Lovers) {
					newSelectList = this.selectList.filter(item => item.Lovers != seat.Lovers)
					newParamsList = this.lockedParams.Seat.filter(item => item.SeatCode != seat.SeatCode)
				} else {
					newSelectList = this.selectList.filter(item => item.SeatCode != seat.SeatCode)
					newParamsList = this.lockedParams.Seat.filter(item => item.SeatCode != seat.SeatCode)
				}

				this.lockedParams.Count = newParamsList.length
				this.lockedParams.Seat = newParamsList

				this.selectList = newSelectList


				if (isBottom) {
					let newArray = this.seatArray
					newArray.map(item => {
						item.map(_seat => {
							if (_seat.SeatCode === seat.SeatCode) {
								_seat.type = 'Available'
							}
						})
					})
					this.seatArray = newArray.slice()
				}

			},

			async getSeat(planCode, screenCode) {
				const screenSeat = await querySeats(screenCode)
				const sessionSeat = await querySessionSeats(planCode)

				this.seatsNum = screenSeat.length
				screenSeat.map((item, index) => {
					item.Status = sessionSeat[index].Status
					if (screenSeat[index + 1]) {
						if (item.Lovers && screenSeat[index + 1].Lovers) item.isLover = true
					}
				})
				const seatList = screenSeat
				this.initData(seatList)
			},
			upDateStatus() {
				querySessionSeats(this.filmData.PlanCode)
			},

		},
		onShow() {


		},
		watch: {
			selectList(n) {
				let price = this.filmData.memberPrice ? this.filmData.memberPrice : this.filmData.LowestPrice
				this.totalPrice = (n.length * parseFloat(price)).toFixed(2)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.date-toast {
		position: absolute;
		z-index: 99;
		background-color: rgba(0, 0, 0, .7);
		color: #fff;
		width: 64vw;
		left: 18vw;
		top: 35vh;
		box-sizing: border-box;
		padding: 20rpx;
		border-radius: 15rpx;
		font-size: 28rpx;
		// text-align: justify;
	}

	.p-all-10 {
		padding: 10rpx;

	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.m-0-10 {
		margin: 0 10rpx;

		image {
			width: 50rpx !important;
			height: 50rpx !important;
		}
	}

	.bg-unbtn {
		background-color: #f9abb3;
	}

	.bg-red-1 {
		background-color: #F45664;
	}

	.br-10 {
		border-radius: 10rpx;
	}

	.ml-20 {
		margin-left: 20rpx;
	}

	.mb-20 {
		margin-bottom: 20rpx;
	}

	.p-all-32 {
		padding: 18rpx 32rpx;
	}

	.fd-cr {
		flex-direction: column-reverse;
	}

	.bottom-bar {
		bottom: var(--window-bottom);
	}

	.info-text {
		line-height: 50rpx;
		font-size: 24rpx;
		color: #999;
		border-bottom: 1px solid #f0f0f5;
		display: flex;
		width: 100%;
		height: 50rpx;
		overflow: hidden;
	}

	.color-fff {
		color: #fff
	}

	.br-15 {
		border-radius: 15rpx;
	}

	.over-h {
		overflow: hidden;
	}

	.dp-ib {
		display: flex;
		justify-content: center;
	}

	.mt-20 {
		margin-top: 5rpx;
	}

	.pa-v-2 {
		/* 定位垂直对齐 */
		left: 50%;
		transform: translateX(-50%)
	}

	.b-d-1 {
		border: 1px dashed #e5e5e5;
	}

	.w-100 {
		width: 100%;
	}

	.h-100 {
		height: 100%;
	}

	.bg-f1 {
		background-color: #f1f1f1;
	}

	.h-100vh {
		height: 100vh;
	}

	.pt-f {
		position: fixed;
	}

	.left-0 {
		left: 0;
	}

	.p-0-32 {
		padding: 0 32rpx;
	}

	.pt-20 {
		padding-top: 10rpx;
	}

	.bg-white {
		background-color: #fff;
		width: 100vw;
	}

	.z1000 {
		z-index: 1000;
	}

	.fz-34 {
		font-size: 34rpx;
	}

	.fw-b {
		font-weight: bold;
	}

	.mt-10 {
		margin-top: 10rpx;
	}

	.fz-28 {
		font-size: 28rpx;
	}

	.color-666 {
		color: #666666
	}

	.dp-f {
		display: flex;
	}

	.jc-c {
		justify-content: center;
	}

	.ai-c {
		align-items: center;
	}

	.fz-22 {
		font-size: 22rpx;
	}

	.color-333 {
		color: #333333
	}

	.m-0-a {
		margin: 0 auto;
	}

	.mt-48 {
		margin-top: 48rpx;
	}

	.fz-20 {
		font-size: 20rpx;
	}

	.color-999 {
		color: #999999
	}

	.b-1 {
		border: 1px solid #CCCCCC;
	}

	.br-5 {
		border-radius: 5rpx;
	}

	.Stage {
		background-color: #dddddd;
		width: 380rpx;
		height: 34rpx;
		transform: perspective(34rpx) rotateX(-10deg);
		margin: 0 auto;
	}

	.bg-line {
		background-color: rgba(0, 0, 0, 0.3);
	}

	.sel-seat {
		background: url('/static/icons/selected.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.unsel-seat {
		background: url('/static/icons/broken.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.bought-seat {
		background: url('/static/icons/isSale.png') center center no-repeat;
		background-size: 100% 100%;
	}

	.fisrt-row {
		margin: 150rpx auto 0 auto !important;
	}

	.row-seats {
		margin: 5rpx auto;
	}

	.select-seats-list {
		width: 90vw;
		overflow: scroll;
		white-space: nowrap;

		.select-seats-box {
			display: inline-block;
		}
	}

	.select-seats {
		border-radius: 5rpx;
		margin-left: 15rpx;
		width: 140rpx;
		position: relative;
		background-color: #f0f0f5;
		font-size: 23rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		text:last-child {
			color: red;
		}
	}

	.film-name {
		display: flex;
		flex-direction: column;



		.seat-film-info {
			font-size: 26rpx;
			color: orange;
			line-height: 60rpx;

			text {
				margin-right: 10rpx;
			}
		}
	}

	.lover {
		width: 200rpx;
		z-index: 999;
	}

	.loverStyle {}
</style>